/******************** 变量 ********************/
$panel-border-color: $border-color-secondary;
$date-seprate-line-color: $separate-line-color;
$calendar-range-bg-color: rgba($primary-color, 0.1);
$calendar-hover-range-bg-color: #d3defd;
$calendar-hover-range-border-color: $primary-color;
$calendar-dashed-border-color: #cccccc;
$calendar-cell-bg-color: #f4f4f4;
$calendar-hover-cell-bg-color: #f0f3fa;
$calendar-selected-cell-bg-color: #eff3fa;
$text-color-disabled-stroke: $text-color-disabled;
$color-white: #ffffff;

$date-color-state: (default, $text-color-disabled-stroke, $background-color-default-stroke, $text-color-default-stroke),
  (hover, $border-color-hover-stroke, $background-color-hover-stroke, $text-color-default-stroke),
  (focus, $border-color-hover-stroke, $background-color-hover-stroke, $text-color-default-stroke),
  (active, $border-color-hover-stroke, $background-color-hover-stroke, $text-color-default-stroke),
  (disabled, $border-color-disabled-stroke, $border-color-disabled-stroke, $text-color-disabled-stroke) !default;

$item-color-state: (default, $background-color-default-stroke, $text-color-default-stroke),
  (hover, $background-color-hover-selection, $text-color-active-stroke), (active, $border-color-active-stroke, $text-color-active-fill),
  (disabled, $background-color-default-stroke, $text-color-disabled-fill) !default;

/******************** mixin ********************/

@mixin itemState($selector, $states) {
  #{ $selector } {
    color: nth(nth($states, 1), 3);
    background: transparent;

    &:hover {
      color: nth(nth($states, 1), 3);
      background: nth(nth($states, 2), 2);
    }

    &.active,
    &.selected {
      color: nth(nth($states, 3), 3);
      background: nth(nth($states, 3), 2);
    }

    &:disabled,
    &[disabled] {
      color: nth(nth($states, 4), 3);
      background: nth(nth($states, 4), 2);
      cursor: not-allowed;
    }
  }
}

@mixin panelItemState($selector, $states) {
  #{ $selector } {
    color: nth(nth($states, 1), 3);
    background: nth(nth($states, 1), 2);

    &:hover {
      color: nth(nth($states, 2), 3);
      background: nth(nth($states, 2), 2);
    }

    &.active,
    &.selected {
      color: nth(nth($states, 3), 3);
      background: nth(nth($states, 3), 2);
    }

    &:disabled,
    &[disabled] {
      color: nth(nth($states, 4), 3);
      background: nth(nth($states, 4), 2);
      cursor: not-allowed;
    }
  }
}

/******************** 组件 ********************/
@include itemState('.lv-calendar-cell-body li span.lv-calendar-cell', $item-color-state);
@include itemState('.lv-calendar-month-body li span.lv-calendar-month-cell', $item-color-state);
@include panelItemState('.lv-calendar-panel-selection li', $item-color-state);

.lv-calendar {
  position: relative;
  width: 100%;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-base;

  > .lv-calendar-container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .lv-canlendar-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.24rem 0;
    border-bottom: $border-width-base $border-style-base $date-seprate-line-color;

    .lv-canlendar-header-center {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 2rem;
      height: $height-base;

      > .center {
        font-weight: $font-weight-bold;
        cursor: pointer;

        &:hover {
          color: $text-color-link;
        }

        &.readonly {
          cursor: default;

          &:hover {
            color: inherit;
          }
        }

        span {
          display: inline-flex;

          &:first-of-type {
            margin-right: $margin-xs;
          }
        }
      }

      > .left i {
        margin-right: $margin-xs;
      }

      > .right i {
        margin-left: $margin-xs;
      }
    }

    .lv-canlendar-header-right,
    .lv-canlendar-header-left {
      width: calc((100% - 2.2rem) / 2);
    }
  }

  .lv-calendar-body {
    position: relative;
    flex: 1 1 auto;
    width: 100%;

    .lv-calendar-cell-resize {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.04rem;
    }

    .lv-calendar-cell-resize-line {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 0;
      border-bottom: $border-width-base dashed $calendar-dashed-border-color;
    }

    .lv-calendar-cell-resize-mark {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      width: 100%;
      height: 100%;
      background-color: rgba($component-background, 0.1);
    }

    .lv-resizer {
      .lv-calendar-cell-resize {
        cursor: row-resize;
      }
    }
  }
}

.lv-calendar-cell-header {
  margin-bottom: 0.08rem;

  > ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;

    > li {
      flex: 1 1 auto;
      width: 10.2857143%;
      height: 0.64rem;
      color: $text-color-secondary;
      font-size: 0.16rem;
      line-height: 0.64rem;

      > span {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.lv-calendar-cell-body {
  position: relative;

  > ul.lv-calendar-cell-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 1.4rem;

    > li {
      display: flex;
      flex: 1 1 auto;
      width: 10.2857143%;
      height: 100%;
      border-right: $border-width-base $border-style-base $border-color-base;
      border-bottom: $border-width-base $border-style-base $border-color-base;

      @include motion-state;

      &:first-of-type {
        border-left: $border-width-base $border-style-base $border-color-base;
      }

      > span.lv-calendar-cell {
        display: block;
        width: 100%;
        height: 100%;
        padding-right: $padding-sm;
        font-size: $font-size-base;
        line-height: 0.32rem;
        text-align: right;
        cursor: pointer;
      }

      .lv-calendar-cell-hide {
        display: flex;
        width: 0.24rem;
        height: 0.24rem;
        line-height: 1;
      }

      &.lv-calendar-last-month-day .lv-calendar-cell,
      &.lv-calendar-next-month-day .lv-calendar-cell {
        color: $text-color-disabled-stroke;
      }

      &.lv-calendar-today .lv-calendar-cell {
        background-color: $calendar-cell-bg-color;

        &:hover {
          background-color: $calendar-hover-cell-bg-color;
        }
      }

      &.lv-calendar-selected-day:not(.lv-calendar-last-month-day):not(.lv-calendar-next-month-day) {
        .lv-calendar-cell {
          color: $background-color-default-fill;
          font-weight: $font-weight-bold;
          background-color: $calendar-selected-cell-bg-color;

          &:hover {
            color: $background-color-default-fill;
          }
        }
      }

      &.lv-calendar-disabled-day {
        .lv-calendar-cell {
          color: $text-color-disabled-stroke;
          cursor: not-allowed;
          opacity: 0.5; // TODO

          &:hover {
            color: $text-color-disabled-stroke;
            background-color: transparent;
          }
        }
      }

      &.lv-calendar-disabled-day.lv-calendar-selected-day {
        .lv-calendar-cell {
          color: $color-white;
          background-color: $text-color-disabled-stroke;

          &:hover {
            color: $color-white;
            background-color: $text-color-disabled-stroke;
          }
        }
      }
    }

    &:first-of-type {
      > li {
        border-top: $border-width-base $border-style-base $border-color-base;
      }
    }
  }
}

.lv-calendar-month-body {
  position: relative;

  > ul:not(.lv-calendar-month-event-row) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;

    > li {
      display: flex;
      flex: 1 1 auto;
      width: 33.333333%;
      height: 1.6rem;
      border-right: $border-width-base $border-style-base $border-color-base;
      border-bottom: $border-width-base $border-style-base #e$border-color-base;

      &:nth-of-type(1),
      &:nth-of-type(4),
      &:nth-of-type(7),
      &:nth-of-type(10) {
        border-left: $border-width-base $border-style-base $border-color-base;
      }

      > span.lv-calendar-month-cell {
        display: block;
        width: 100%;
        height: 100%;
        padding-right: $padding-sm;
        font-size: $font-size-base;
        line-height: 0.32rem;
        text-align: right;
        cursor: pointer;
      }

      &.lv-calendar-month-selected-cell {
        .lv-calendar-month-cell {
          color: $background-color-default-fill;
          font-weight: $font-weight-bold;
          background-color: $calendar-selected-cell-bg-color;

          &:hover {
            color: $background-color-default-fill;
          }
        }
      }
    }
  }

  &.lv-calendar-month-body-independent {
    > ul {
      > li {
        &.lv-calendar-month-disabled-cell {
          .lv-calendar-month-cell {
            color: $text-color-disabled-stroke;
            cursor: not-allowed;
            opacity: 0.5;

            &:hover {
              color: $text-color-disabled-stroke;
              background-color: transparent;
            }
          }
        }

        &.lv-calendar-month-disabled-cell.lv-calendar-month-selected-cell {
          .lv-calendar-month-cell {
            color: $color-white;
            background-color: $text-color-disabled-stroke;

            &:hover {
              color: $color-white;
              background-color: $text-color-disabled-stroke;
            }
          }
        }
      }
    }
  }
}

.lv-canlendar-change-mode {
  display: flex;
  justify-content: flex-end;
}

.lv-calendar-mode-switch {
  .lv-button.lv-button-size-default {
    min-width: auto;
  }
}

.lv-calendar-day-event-row {
  position: absolute;
  top: 0.32rem;
  left: 0;
  width: 100%;
  height: calc(100% - 0.32rem);
  overflow-x: hidden;

  .lv-calendar-event-item {
    position: absolute;
    height: 0.26rem;

    > div.lv-calendar-event-item-title {
      margin-right: 0.01rem;
      padding: 0 $padding-sm;
      color: $color-white;
      line-height: 0.24rem;
      background-color: $primary-color;
      cursor: pointer;
    }
  }
}

.lv-calendar-month-event-row {
  position: absolute;
  left: 0;
  display: flex;
  width: 100%;
  height: calc(1.6rem - 0.32rem);
  overflow-x: hidden;

  .lv-calendar-event-item {
    position: absolute;
    height: 0.26rem;

    > div.lv-calendar-event-item-title {
      width: 100%;
      margin-right: 0.01rem;
      padding: 0 $padding-sm;
      color: $color-white;
      line-height: 0.24rem;
      background-color: $primary-color;
      cursor: pointer;
    }
  }
}

.lv-calendar-month-body {
  ul:nth-child(2) {
    top: 0.32rem;
  }

  ul:nth-child(3) {
    top: 1.92rem;
  }

  ul:nth-child(4) {
    top: 3.52rem;
  }

  ul:nth-child(5) {
    top: 5.12rem;
  }
}

.lv-calendar-panel {
  width: 100%;
  @include component-scroll-lg;
}

.lv-calendar-panel-container {
  display: flex;
  flex-direction: column;
  background: $color-white;
  border: $border-width-base $border-style-base $primary-color;

  .lv-calendar-panel-body {
    display: flex;

    &.lv-calendar-panel-reverse {
      flex-direction: row-reverse;
    }
  }

  .lv-calendar-panel-selection {
    flex: 1 1 auto;
    width: 100%;
    max-height: 2rem;
    overflow: hidden;

    &:hover {
      overflow: auto;
    }

    li {
      padding: $padding-xs 0 $padding-xs 0.14rem;
      text-align: left;
      cursor: pointer;

      &[disabled] {
        &.selected {
          color: $color-white;
          background-color: $border-color-disabled;
        }
      }
    }
  }

  .lv-calendar-panel-selection {
    border-right: $border-radius-xs $border-style-base $separate-line-color;
  }
}

.lv-user-select-disabled {
  user-select: none;
}
